<template>
    <div class="docadd-box">
        <div class="docadd-item">
            <!-- 表单 -->
            <el-form :model="form" label-width="120px">
                <el-form-item label="医生账号" label-width="120px">
                    <el-input v-model="form.account" disabled clearable />
                </el-form-item>
                <el-form-item label="账号权限">
                    <el-select v-model="form.region" placeholder="请选择权限" disabled>
                        <el-option label="医生" value="0" />
                        <el-option label="护士" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="旧密码" label-width="120px">
                    <el-input v-model="form.oldpwd" clearable type="password" show-password />
                </el-form-item>
                <el-form-item label="新密码" label-width="120px">
                    <el-input v-model="form.newpwd" clearable type="password" show-password />
                </el-form-item>
                <el-form-item label="姓名" label-width="120px">
                    <el-input v-model="form.name" clearable />
                </el-form-item>
                <el-form-item label="身份证号" label-width="120px">
                    <el-input v-model="form.idcard" clearable />
                </el-form-item>
                <el-form-item label="手机号" label-width="120px">
                    <el-input v-model="form.phone" clearable />
                </el-form-item>
                <el-form-item label="科室更改">
                    <el-select v-model="form.department" placeholder="请选择科室">
                        <el-option label="五官科" value="五官科" />
                        <el-option label="精神科" value="精神科" />
                    </el-select>
                </el-form-item>
                <el-form-item label="更改照片" label-width="120px">
                    <el-upload class="avatar-uploader" action="http://129.211.169.131:21006/users/uploadheader"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">确认修改</el-button>
                    <el-button>返回上一级</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect } from 'vue';
import { useStore } from 'vuex';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const store = useStore()
// 定义表单数据
const form = reactive({
    account: 'admx@12778',
    region: '医生',
    oldpwd: '',
    newpwd: '',
    name: 'k医生',
    idcard: '1214',
    phone: '17784764799',
    department: '精神科',
    head: ''
})
//定义图片数据
const imageUrl = ref('')
// 点击修改
const onSubmit = () => {
    for (const key in form) {
        if (form[key] === '' || form[key] === null) delete form[key]
    }

    store.dispatch('doc/A_ediForm', { ...form, id: 2 })
    console.log(form);

}
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log(response);
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    form.head = response.header
}
</script>
<style scoped lang="scss">
.docadd-box {
    .docadd-item{
        padding-right: 1000px;
        box-sizing: border-box;
    }
}
</style>
<style>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>